import React, {
    Component,
} from 'react';

import {
    Text,
    View,
    Button,
    TouchableWithoutFeedback,
    ToastAndroid,
} from 'react-native';

import {set as skill_set} from '../../actions/skill';

import styles from "./css/fillFaver";

export default class FillFaver extends Component {

    constructor(props){
        super(props);
        let sex = this.props.navigation.getParam('sex', 1);
        let list = this.props.navigation.getParam('list', []);
        this.state = {
            sex: sex,
            list: list,
            selected: []
        }
    }

    _handleRegister(){
        if(this.state.selected.length != 3){
            ToastAndroid.showWithGravity("需要选满3个", ToastAndroid.SHORT, ToastAndroid.CENTER);
            return;
        }
        let that = this;
        skill_set(this.state.selected, () => {
            that.props.navigation.navigate('Mainpage');
        });
    }

    _select(sid){
        let c_sid_index = this.state.selected.indexOf(sid);
        if(c_sid_index >= 0){
            this.state.selected.splice(c_sid_index, 1);
        }else{
            if(this.state.selected.length >= 3){
                ToastAndroid.showWithGravity("请选择最适合的3项", ToastAndroid.SHORT, ToastAndroid.CENTER);
            }else{
                this.state.selected.push(sid);
            }
        }
        this.setState({
            selected: this.state.selected
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.headBox}>
                </View>
                <Text style={styles.headTxt}>
                    {this.state.sex == 1 ? "你想遇上什么样的妹子？":"你是个什么样的妹子？"}
                </Text>

                <View style={styles.bodyBox}>
                    <Text style={styles.tip}>
                        （请选择最适合你的3项）
                    </Text>
                    <View style={styles.listBox}>
                {this.state.list.map((item,i) => {
                    let selected = this.state.selected.indexOf(item.sid)>=0 ? styles.selected : {};
                    return (
                        <TouchableWithoutFeedback  key={item.sid} onPress={()=>this._select(item.sid)}>
                            <Text style={[
                                styles.listItem, 
                                selected
                            ]}>{item.name}</Text>
                        </TouchableWithoutFeedback>
                    )
                })}
                    </View>
                </View>

                <View style={styles.footBox}>
                    <Button
                        onPress={()=>this._handleRegister()}
                        title="提交"
                        color="#5792f6"
                        />
                </View>
            </View>
        )
    }
}